<template>
	<view class="content">
		<u-navbar bgColor="#f5f5f5" titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="确认订单"
			:autoBack="true">
		</u-navbar>
		<!-- 加载页 -->
		<u-loading-page loading-text="loading..." v-if='pageLoading' :loading='true' bgColor='#f5f5f5'></u-loading-page>
		<view class="container" v-else>
			<view class="address flexJBC" v-if="address"  style='align-items:flex-start;'
				@click="$my.go('/pages/my/more/address/shippingAddress?type='+type)">
				<view class="left co3 fontS28">
					<view class="box">
						<image src="/static/images/adres-red.png" style="height: 48rpx;width: 48rpx;" mode=""></image>
					</view>
					<view>
						<view class="">
							提货仓库：宁波仓
						</view>
						<view class="">
							提货公司：{{address.take_company_name}}
						</view>
						<view class="">
							下单人：{{address.real_name}}  {{address.phone}}
						</view>
						<view class="">
							提货人：{{address.take_name}}  {{address.take_phone}}
						</view>
						<!-- <view class="box2 co3 fontS28 fw6">
							{{address.province}}{{address.city}}{{address.district}}{{address.street}}{{address.detail}}
						</view>
						<view class="box2 co3 fontS28 fw6" style="margin-top: 8rpx;">{{address.real_name}}
							<text class="fontS22 co6 fw5" style="margin-left: 8rpx;">{{address.phone}}</text>
						</view> -->
					</view>
				</view>
				<view class="right" style='margin-top: 10rpx;'>
					<u-icon name="arrow-right" color="#ccc" size="17rpx"></u-icon>
				</view>
			</view>
			<view class="card" v-for="item in goodsInfo" :key="item.store_id">
				<view class="name flex">
					<image :src="item.store_image"
						style="margin-right: 8rpx; width:48rpx;height: 48rpx;border-radius: 24rpx;" mode=""></image>
					<view class="co3 fontS28 fw6">{{item.stroe_name}}</view>
				</view>
				<view class="" v-for="itemm in item.goods":key="itemm.cart_id">
					<view class="substance flex" style="margin-top: 16rpx;" >
						<image style="width: 160rpx; height: 160rpx;margin-right: 20rpx;border-radius: 8rpx;"
							:src="itemm.image" mode=""></image>
						<view class="box">
							<view class="fontS28 co3 elipes2 mb24 " style="line-height: 40rpx;">
								{{itemm.product_name}}
							</view>
							<view class="co9 fontS24">
								<view style="margin-bottom: 16rpx;">
									 {{itemm.warehouse_type_text}}
								</view>
								<view class="flex">
									<view style="margin-right: 40rpx;" v-if="itemm.suk_name">{{itemm.suk_name}}</view>
									<view class="">单价:￥{{itemm.price}}<text v-if='itemm.unit_name'> / {{itemm.unit_name}}</text></view>
								</view>
							</view>
						</view>
					</view>
					<view class="flexJBC fontS28" style="margin-top: 24rpx;background: #F5F5F5;line-height: 58rpx;padding: 0  64rpx;box-sizing: border-box;">
						<view class="co3 center" style="width: 50%;">数量: {{itemm.num}}</view>
						<view class="co3 center"  style="width: 50%;">合计: ￥{{(itemm.num * itemm.price).toFixed(2)}}</view>
					</view>
				</view>
			</view>
			<view class="li">
				<view class="box flexJBC" @click="couponList.length>0?showCoupon=true:''">
					<view class="left">
						优惠券
					</view>
					<view class="right flex co9 fontS24">
						<text v-if="couponList.length==0">暂无可用</text>
						<text v-else>
							{{couponList[radioGroupValue]?couponList[radioGroupValue].title:''}}
						</text>
						<u-icon name="arrow-right" style="margin-left: 20rpx;" color="#ccc" v-if="couponList.length>0"></u-icon>
					</view>
				</view>
				<view class="box flexJBC">
					<view class="left">
						<text>匿名购买</text>
					</view>
					<view class="">
						<u-switch inactiveColor="#ccc" size="20" activeColor="#DD2131" v-model="switchValue"
							@change="change"></u-switch>
					</view>
				</view>
				<view class="box flexJBC">
					<view class="left">
						<text>备注</text>
					</view>
					<view class="" :style="{textAlign:mark.length>15?'left':'right'}" style='width: 75%;'>
						<u-textarea autoHeight  style='border: none;' :placeholderStyle="{textAlign:'right'}" v-model="mark" maxlength='200' placeholder="请输入内容" confirmType='done'></u-textarea>
					</view> 
				</view>
			</view>
			<view class="li">
				<view class="box flexJBC">
					<view class="left">
						{{need_review?'预估':''}}运费
					</view>
					<view class="right flex co9 fontS24" @click="need_review?$my.go('/myPackageA/freightReview'):''">
						￥{{total.total_free}}
						<u-icon name="arrow-right" style="margin-left: 20rpx;" color="#ccc" v-if="need_review"></u-icon>
					</view>
				</view>
				<!-- <view class="box flexJBC" @click="$my.go('/pages/my/ticket/index?type='+type)">
					<view class="left">
						发票
					</view>
					<view class="right flex co9 fontS24">
						<u-input
						  disabled
						  customStyle="background:#fff"
						  fontSize='24rpx'
						  color="#333"
						    placeholderStyle='text-align: right;color:#999' 
						   placeholder="请选择个人/公司抬头" 
						   border="none"
						   v-model="ticket.receipt_title"
						 ></u-input>
						 <u-icon name="arrow-right"></u-icon>
					</view>
				</view> -->
			</view>
			<view class="li">
				<view class="box flexJBC">
					<view class="left">
						<view class="fontS24 co9">标准配送</view>
					</view>
					<!-- <view class="right flex co9 fontS24">
						￥6.00
						<u-icon name="arrow-right" style="margin-left: 20rpx;"></u-icon>
					</view> -->
				</view>
				<view class="box flex">
					<view class="left" style="margin-right: 180rpx;">
						<text class="fontS24 co9">货款总价：</text><text class="fontS24 co3">￥{{total.total_price}}</text>
					</view>
					<view class="right flex co9 fontS24">
						货物数量：{{total.total_num}}
					</view>
				</view>
				<view class="box flex">
					<view class="left" style="margin-right: 180rpx;">
						<text class="fontS24 co9">{{need_review?'预估':''}}运费：</text><text class="fontS24 co3">￥{{total.total_free}}</text>
						
					</view>
					<view class="right flex co9 fontS24">
						优惠：<text class="fw5">￥{{(total.total_real_price - total_real_price).toFixed(2) }}</text>
					</view> 
					<!-- <view class="right flex co9 fontS24"> 
						订单合计：<text class="homeRed fw5">￥{{total.total_real_price + total.total_free}}</text>
					</view> -->
				</view>
				<view class="box flex">
					<view class="right flex co9 fontS24">
						订单合计：<text class="homeRed fw5">￥{{total_real_price }}</text>
					</view>
				</view>
			</view>
			<view class="bottom flexJBC">
				<view class="left">
					<!-- <text class="fontS20 homeRed">99</text> -->
					<text class="co9 fontS28">合计</text> ：<text class="fontS20 homeRed">￥</text><text
						class="fontS32 homeRed">{{total_real_price}}</text>
				</view>
				<view class="right">
					<view class="cof" style="border-radius:48rpx; background-color: #dd3121;padding: 20rpx 48rpx;"
						@click="goPay">
						提交订单
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showCoupon" round="10" :closeable='true' @close="showCoupon=false">
			<view class="lisbox">
				<view class="center fontS32 co3">
					优惠券
				</view>
				<scroll-view scroll-y="true" style='max-height: 70vh;'>
					<u-radio-group shape="circle" v-model="radioGroupValue" iconColor='#333' inactiveColor='#FEC587'
						activeColor="#FEC587" placement="column" @change="radioCouponChange">
						<view class="lisBoxCoupon" v-for="(item,index) in couponList">
							<view class='lis'>
								<view class='whiBox flexJBC'>
									<view class='left '>
										<div class='left_t '>
											<div class='flex'>
												<view style="color: #EE8950;margin-right: 20rpx;" v-if="item.type==1">
													<text class='fw7 fontS20'>￥</text>
													<text class="fw9 fontS40">{{item.coupon_price}}</text>
												</view>
												<view style="color: #EE8950;margin-right: 20rpx;" v-if="item.type==2">
													<text class="fw9 fontS40">{{item.discount}}</text>
													<text class='fw7 fontS20'>折</text>
												</view>
												<view class="">
													<view class="co3 fw9 fontS24" style="margin-bottom: 10rpx;">
														{{item.title}}
													</view>
													<view class="fontS16 co6" style="line-height: 35rpx;">
														<view class="">
															{{item.full_text}}
														</view>
													</view>
												</view>
											</div>
										</div>
									</view>
									<view class='right'>
										<u-radio :name="index" @change="radioChange">
										</u-radio>
									</view>
								</view>
								<view class='left_b ' @click="item.showInfo=!item.showInfo">
									<view class="flexJBC">
										<view class="co6 fontS20">
											使用说明
										</view>
										<u-icon :name="item.showInfo?'arrow-down':'arrow-right'" size='16rpx'
											color="#666"></u-icon>
									</view>
									<view class="fontS16 co6" style="margin-top: 8rpx;" v-if="item.showInfo">
										{{item.text}}
									</view>
								</view>
							</view>
						</view>
					</u-radio-group>
				</scroll-view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				need_review:false, //是否需要运费复核
				total_real_price: 0, //总合计多少元 已经加过运费
				couponList: [], //优惠券列表
				radioCoupon: [], //优惠券单选 
				showCoupon: false,
				ticket: {}, //发票信息
				orderinfo: {}, //当tyoe为2时所需要的参数
				pageLoading: true,
				type: 2, // 1是购物车购买  2是直接购买
				invoice: "", //发票
				switchValue: false, //匿名购买
				goodsInfo: "", //商品列表
				total: "", //
				address: '', //地址详情
				cart_id: "", //商品id
				address_id: "", //地址id
				value: false,
				radioGroupValue: '', //当前 radioGroup 选中的值
				radioValue: '', // 当前 radio 的值
				num: 0 ,//用于区分是否是重复选中，
				mark:'',//备注
			}
		},
		onShow() {
			// 查看地址详情
			this.$my.get('/index/user/get_address').then(res => {
				if (res.code == 200) {
					if (res.data.length > 0) {
						// if(this.address_id){
						this.$my.post('/index/user/get_address_info', {
							id: this.address_id ? this.address_id : ''
						}).then(res => {
							if (res.code == 200) {
								this.address = res.data
								let url;
								let data;
								if (this.type == 1) {
									// 购物车购买
									url = '/index/cart/order/pre_order'
									data = {
										cart_id: this.cart_id,
										address_id: this.address ? this.address.id : '',
									}
								} else {
									// 直接购买
									url = '/index/proudct/order/perProductOrder';
									data = Object.assign(this.orderinfo, {
										address_id: this.address ? this.address.id : '',
									})
								}
								// console.log(this.orderinfo,88)
								// return
								this.$my.post(url, data).then(res => {
									if (res.code == 200) {
										this.need_review=res.data.need_review
										this.goodsInfo = res.data.list
										this.total = res.data.total
										this.total_real_price = this.total.total_real_price   //订单合计
										this.couponList = res.data.coupon ? res.data.coupon : [],
											this.couponList.forEach(item => { 
												this.$set(item, 'showInfo', false) //是否显示使用说明
										}) 
										this.pageLoading = false;
										this.radioGroupValue=null ;
									}
								})
							}
						})
					} else {
						let _this = this
						this.pageLoading = true;
						uni.showModal({
							title: "",
							content: "还没有收获地址先去创建一个吧~",
							cancelText: '取消', // 取消按钮的文字   
							confirmText: '去创建', // 确认按钮的文字   
							success: function(res) {
								console.log(res)
								if (res.confirm) {
									_this.$my.go('/pages/my/more/address/shippingAddress?type=' + _this
										.type)
								}
								if (res.cancel) {
									_this.$my.go()
								}
							}
						})
					}
				}
			})
		},
		onLoad(option) {
			// 发票信息
			if (option.ticket) {
				this.ticket = JSON.parse(option.ticket)
			}
			if (option.type == 1) {
				this.cart_id = option.cart_id;
			} else {
				this.orderinfo = JSON.parse(option.orderinfo)
			}
			this.address_id = option.address_id;
			this.type = option.type ? option.type : 2;
			console.log(this.orderinfo, this.type, 454545)
		},
		methods: {
			// 当切换其他选项的时候此方法才会执行
			radioChange(n) {
				this.radioValue = n
				// 切换选项后需要初始化 num
				this.num = 0
			},
			radioCouponChange(n) {
				if (n == this.radioValue && this.num == 0) {
					// 第一次相等即执行以下代码
					this.num++
				} else {
					// 第一次后相等即执行以下代码
					// 置空 radioGroupValue 即取消选中的值
					this.radioGroupValue = ''
					// 初始化 num
					this.num = 0
				}
				if(this.radioGroupValue || this.radioGroupValue===0){ //如果选中了优惠券
						let couponItem=this.couponList[this.radioGroupValue]
						console.log(couponItem)
						if(couponItem.coupon_type==1){ //满减卷
							this.total_real_price=(this.total.total_price-couponItem.coupon_price + Number(this.total.total_free)).toFixed(2)
						}else{
							// 折扣券
							this.total_real_price=(this.total.total_price*(couponItem.discount/10) + Number(this.total.total_free)).toFixed(2)
							console.log((this.total.total_price*(couponItem.discount/10)))
						}
					}else{
						this.total_real_price=this.total.total_real_price
					}
				    this.showCoupon = false
			},
			// 提交订单
			goPay() {
				let data = {
					type: this.type, //1是购物车购买  2是直接购买
					address_id: this.address.id,
					cart_id: this.cart_id, //type为2时可以不传
					receipt_id: this.ticket.id ? this.ticket.id :'' ,
					mark:this.mark, //备注信息
					anonymous: this.switchValue ? 1 : 0,
				}
				if (this.radioGroupValue ||  this.radioGroupValue===0) { //如果选中了优惠券
					let couponItem = this.couponList[this.radioGroupValue]
					data = Object.assign(data, {
						coupon_id: couponItem.coupon_id
					})
				}
				
				if(this.need_review){
					// 需要运费复核的订单
					// 创建订单
					this.$my.post('/index/order/create', Object.assign(this.orderinfo,data, {
						pay_type: 2, //支付宝支付
					})).then(res => {
						if (res.code == 200) {
							uni.redirectTo({
								url:'/myPackageA/freightReview'
							})
						}else{
							this.$my.toast(res.message)
						}
					})
				}else{
					this.$my.go('/myPackageA/goodsAndFacton/pay/pay?data=' + JSON.stringify(Object.assign(this.orderinfo,data)) + '&totalPrice=' + this.total_real_price)
				}
			},
			change(e) {
				console.log('change', e);
				uni.reLaunch({
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lisbox {
		padding: 24rpx 36rpx;
		box-sizing: border-box;

		.lisBoxCoupon {
			background: #FEECCF;
			border-radius: 24rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.lis {
				width: 100%;
				border-radius: 24rpx;

				.left_b {
					// height:46rpx;
					// line-height: 46rpx;
					padding: 8rpx 20rpx;
					border-top: 2rpx solid #F5F5F5;
					// padding:0 20rpx;
					box-sizing: border-box;
				}

				.whiBox {
					border-radius: 24rpx;

					.left {
						width: 70%;
						display: flex;
						justify-content: space-between;
						flex-direction: column;

						.left_t {
							flex: 1;
							padding: 20rpx;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: center;
						}
					}

					.right {
						padding: 20rpx;
						box-sizing: border-box;
						position: relative;
					}
				}
			}
		}
	}

	/deep/.uni-input-input {
		text-align: right;
	}

	.content {
		.container {
			.address {
				margin: 0 4%;
				margin-top: 20rpx;
				padding: 24rpx;
				background-color: white;

				.left {
					display: flex;

					.box2 {
						width: 492rpx;
						margin-left: 28rpx;
						line-height: 34rpx;
					}
				}
			}

			.card {
				padding: 24rpx;
				margin: 28rpx 4%;
				background-color: white;
			}

			.li {
				margin: 28rpx 4% 0;
				padding: 0 20rpx;
				background-color: white;
				border-radius: 8rpx;

				.box {
					padding: 20rpx 0;
				}
			}

			.bottom {
				padding: 8rpx 32rpx;
				margin-top: 28rpx;
				background-color: #fff;
			}
		}
	}
</style>
